<template>
  <div class="ee-form-item">
    <label :for="this.for" :class="{ required: required, colon: colon }">{{ label }}</label>
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script type="text/javascript">
import child from '../__mixin/relation/child'
import eeForm from './ee-form.vue'

export default {
  name: "ee-form-item",
  mixins: [child],
  props: {
    /** label 的 for 属性，可以点击 label 时让输入框等获得焦点 */
    for: String,
    /** label 的文本 */
    label: String,
    /** label 前增加'*' */
    required: Boolean,
    /** label 后增加':' */
    colon: Boolean,
  },
  computed: {
    pname() { return eeForm.name; },
  },
}
</script>

<style lang="scss">
.ee-form-item {
  display: flex;
  align-items: center;
  margin-bottom: 1.5em;

  & > label {
    text-align: right;
    width: var(--ee-form-item-label);
    margin-right: .5em;
    white-space: nowrap;

    &.required::before {
      content: '*';
      color: var(--danger0);
      margin-right: .25em;
    }

    &.colon::after {
      content: ':';
      margin-left: .25em;
    }
  }

  & > div {

  }
}
</style>